<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<style>
			p{margin-bottom: 10px;}
		</style>
	</head>
	<body>
		<h3>Switch 开关</h3>

		<section>
			<div class="example">
				<!-- Switch -->
				<p>
					<label class="switch">
						<input type="checkbox">
						<span class="lever"></span>
						<span>开关</span>
					</label>
				</p>
				<br>
				<!-- Disabled Switch -->
				<p>
					<label class="switch">
						<input disabled type="checkbox">
						<span class="lever"></span>
						<span>禁用的开关</span>
					</label>
				</p>
			</div>
			<pre class="html"><code>
	&lt;p&gt;
		&lt;!-- Switch --&gt;
		&lt;label class="switch"&gt;
			&lt;input type="checkbox"&gt;
			&lt;span class="lever"&gt;&lt;/span&gt;
			&lt;span&gt;开关&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
	&lt;br&gt;
	&lt;p&gt;
		&lt;!-- Disabled Switch --&gt;
		&lt;label class="switch"&gt;
			&lt;input disabled type="checkbox"&gt;
			&lt;span class="lever"&gt;&lt;/span&gt;
			&lt;span&gt;禁用的开关&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
			</code></pre>
		</section>

		<script>
		$(document).ready(function() {
		$('pre code').each(function(i, block) {
		hljs.highlightBlock(block);
		});
		});
		</script>
	</body>
</html>